<template>
	<view class="address-page-container u-p-30">
		<common-navabar title="我的地址"  :borderBottom="true"></common-navabar>
		<template v-if="myAddressList.length>0">
			<scroll-view class="no-scroll-bar" :scroll-x="false" :scroll-y="true" 
						:style="'width:100%;height:'+scrollViewHeight+'px'">
			<u-radio-group v-model="defaultAddress.id" :wrap="true" width="100%">
				<view :style="'background-color:'+(res.id==defaultAddress.id?'#f3f4f6':'#FFFFFF')+';border-radius: 20rpx;margin-bottom: 20rpx;width:'+(windowWidth-36)+'px;'"
					v-for="(res, index) in myAddressList" :key="index">
					<view @click="setOrderAddress(res)">
						<view class="u-p-30 u-flex u-row-between u-col-center" style="font-weight: bold;font-size: 32rpx;">
							<view class="u-flex u-row-left u-col-center">
								<view class="u-line-1">{{ res.linkMan }}({{res.sexLabel}})</view>
								<view class="u-m-l-30">{{ res.mobile }}</view>
							</view>
							<view>
								<u-tag :text="res.addressTagLabel" mode="light" shape="circle" type="warning"/>
							</view>
						</view>
						<view class="u-p-l-30 u-p-r-30 u-p-b-30 u-border-bottom">
							<view class="u-line-5">
								<text class="u-m-r-10">{{res.addressInfo}}</text>
								<text>{{res.addressDetail}}</text>
							</view>
						</view>
					</view>

					<view class="u-flex u-row-between u-col-center u-p-20">
						<view>
							<view>
								<u-radio :name="res.id" active-color="#f29100" @change="radioChange($event,index)">
									<text v-if="res.id === defaultAddress.id" style="color:#f29100;">已设为默认</text>
									<text v-else style="color:#333333;">设为默认</text>
								</u-radio>
							</view>
						</view>
						<view class="u-flex u-row-around u-col-center">
							<view>
								<u-icon name="trash" :size="40" color="#909399" label="删除" label-color="#909399"
									label-size="30" lable-pos="left" @tap="deleteAddr(res.id)"></u-icon>
							</view>
							<view class="u-m-l-30">
								<u-icon name="edit-pen" :size="40" color="#909399" label="编辑" label-color="#909399"
									label-size="30" lable-pos="left" @tap="editAddr(res)"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</u-radio-group>
			</scroll-view>
		</template>
		<template v-else>
			<view style="margin-top: 100rpx;margin-bottom: 20rpx;">
				<empty :src="'/static/images/order/order-empty-1.png'" :textArr="['暂无地址信息','请点击底部按钮添加地址']"></empty>
			</view>
		</template>
		<view class="addSite" @tap="toAddSite">
			<view class="add">
				<u-icon name="plus" color="#ffffff" class="icon" :size="30"></u-icon>新建收货地址
			</view>
		</view>
		<u-modal v-model="modelObj.delAddrModelFlag" :content="modelObj.delContent" :show-title="false"
			:show-cancel-button="true" confirm-color="#E60012" @confirm="confirmDelAddr" @cancel="cancelDelAddr">
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//弹窗
				modelObj: {
					delId: 0,
					delAddrModelFlag: false,
					delContent: '是否删除该地址?'
				},
				scrollViewHeight:0,
				windowWidth:0,
			};
		},
		onLoad: function(option) {
			let windowHeight = this.$u.sys().windowHeight;
			this.scrollViewHeight = windowHeight / 10 *9 - 110;
			this.windowWidth= this.$u.sys().windowWidth;
		},
		onShow() {
			this.getData();
		},
		methods: {
			getData() {
				this.$forceUpdate();
			},
			setOrderAddress:function(addr){
				this.$u.vuex("defaultAddress",addr);
				this.getData();
				uni.navigateBack();
			},
			//默认地址变化
			radioChange: function(e, index) {
				let that=this;
				console.log("设置默认"+index+"地址",e);
				let addr = this.myAddressList[index];
				this.$u.vuex("defaultAddress",addr);
				this.getData();
			},
			//删除地址
			deleteAddr(id) {
				this.modelObj.delId = id;
				this.modelObj.delAddrModelFlag = true;
			},
			//确认删除
			confirmDelAddr: function() {
				let that=this;
				let delId=this.modelObj.delId;
				let newAddrList= this.myAddressList.filter(function(addr){
					 return addr.id!=delId;
				});
				that.$u.vuex("myAddressList",newAddrList);
				//如果默认地址就是当前删除的地址
				if(that.defaultAddress.id==delId){
					if(newAddrList.length>0){
						that.$u.vuex("defaultAddress",newAddrList[0]);		
					}
					else{
						that.$u.vuex("defaultAddress",{});	
					}			 
				}
				that.getData();
			},
			//取消删除
			cancelDelAddr: function() {
				this.modelObj.delId = 0;
				this.modelObj.delAddrModelFlag = false;
			},
			//编辑地址
			editAddr: function(addressObj) {
				//console.log("跳转地址编辑",addressObj);
				this.$u.route({
					url: '/pages/common/my-address/addAddress',
					params:{
						address:JSON.stringify(addressObj)
					}
				})
			},
			//新增地址
			toAddSite() {
				this.$u.route({
					url: '/pages/common/my-address/addAddress',
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.addSite {
		display: flex;
		justify-content: space-around;
		width: 600rpx;
		line-height: 100rpx;
		position: absolute;
		bottom: 30rpx;
		left: 80rpx;
		background-color: #f29100;
		border-radius: 60rpx;
		font-size: 30rpx;

		.add {
			display: flex;
			align-items: center;
			color: #ffffff;

			.icon {
				margin-right: 10rpx;
			}
		}
	}
</style>
